import React, { useEffect, useState } from 'react';
import { Descriptions, Badge } from 'antd';

function Detail({ detail }) {
  const info = detail;
  return (
    detail.tasks && detail.tasks.length > 0 && (
      detail.tasks.map((item) => (
        <Descriptions size="small" bordered style={{ marginBottom: '10px' }}>
          <Descriptions.Item label="应用名称">{info.name || '-'}</Descriptions.Item>
          <Descriptions.Item label="主机地址">{item.executor.hostIp || '-'}</Descriptions.Item>
          <Descriptions.Item label="类型">
            {/* <Badge status={info.isSuccess ? 'success' : 'error'} text={info.isSuccess ? '正常' : '异常'} /> */}
            {item.type}
          </Descriptions.Item>
          {/* <Descriptions.Item label="MAC地址">{item.executor.macAddress || '-'}</Descriptions.Item> */}
          <Descriptions.Item label="主机名称">{item.executor.hostname || '-'}</Descriptions.Item>
          <Descriptions.Item label="容器ID" span={2}>
            {item.executor.container}
          </Descriptions.Item>

          <Descriptions.Item label="cpu">
            {item.resources.cpu || '-'}
            核
          </Descriptions.Item>
          <Descriptions.Item label="内存">
            {item.resources.memory || '-'}
            M
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{new Date(item.createTime).toLocaleString() || '-'}</Descriptions.Item>
          <Descriptions.Item style={{ whiteSpace: 'pre-wrap' }} label="环境变量">
            {JSON.stringify(item.envs, '', '\r')}
          </Descriptions.Item>
        </Descriptions>
      ))
    )
    
  );
}

export default Detail;